<template>
	<view style="flex-wrap: wrap;display: flex;width: 100%;">
		<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;" @click="onIconClick(item)">
			<!-- 选择列  项目-->
	
				<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
					<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
						<view><i :class="assetsItemsClass(item)" style="font-size: 24px;"></i></view>
						<view style="font-size: 10rpx;">{{item.name}}</view>
					</view>
				</view>
				
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				assetsItems:[
					{
						name:'图片',
						icon:'icon-tupian1',
						type:'img'
					},
					{
						name:'视频',
						icon:'icon-shipin',
						type:'video'
					},
					{
						name:'附件',
						icon:'icon-fujian02',
						type:'file'
					}
				],
			}
		},
		computed:{
			assetsItemsClass()
			{
				return function(item){
					let itemsClass = {
						icon:true,
						iconfont:true
					}
					
					itemsClass[item.icon] = true
			
					return itemsClass;
				}
			}
		},
		methods:{
			onIconClick(item){
				console.log('xxx')
				this.$emit('icon-click',item)
			}
		}
	}
</script>

<style>
</style>